<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>homeWork1</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style>
        body{
            background-color:lightsteelblue;

        }
        #switchShow{
            display: block;
            width: 150px;
            height: 40px;
            background-color: peachpuff;
            font-size: 20px;
            font-weight: bold;
            color: white;
            border:0;
        }
        #showTime{
            font-size: 50px;
            text-shadow: 2px 0px 10px #faf,-3px -2px 5px #843;
        }
    </style>
</head>
<body>
<!--编程题: 写一个按键, 点击后 轮流显示”日周月”, 关闭后再打开能显示关闭前显示的状态-->
<!--概念题:  1. HTML行内元素有哪些, 块级元素有哪些?画出CSS盒模型-->
<!--2.CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高?-->
<!--3. 清除浮动的几种方式, 各自的优缺点?-->
<!--4. HTML5存储类型有哪些?-->
<!--5. HTTP状态吗有哪些, 分别代表什么意思?(几个常用的就行, 不用全说)-->

<!--编程：第一题（显示时间）-->
<div id="first">
    <h1>编程：第一题（切换显示时间）</h1>
    <button id="switchShow">点击切换</button>
    <p id="showTime"></p>
</div>
<script>


    function getCurrentDate() {
        var nowDate = new Date();
        var date = nowDate.getDate()+"日";
        var day = nowDate.getDay();
        if(day==0){
            day="星期天";
        }else{
            day="星期"+day;
        }
        var month = nowDate.getMonth()+1+"月";
        return [date,day,month];
    }


    function showMsg(index,arr) {
        $("#showTime").html(arr[index]);
        localStorage.setItem("timeIndex",index);
    }

    var index = localStorage.getItem("timeIndex");
    if(!index){
        index = 0;
    }
    var dateArr = getCurrentDate();
    showMsg(index,dateArr);


    $("#switchShow").click(function () {

        var dateArr = getCurrentDate();
        index++;
        if(index==3){
            index=0;
        }

        showMsg(index,dateArr);


    })
</script>
<hr>
<!--概念第一题-->
<h1>概念：第一题 行内标签，块级标签，盒模型</h1>
<p>行内元素：a链接,b加粗,br换行，code定义代码，em强调，i斜体,span无意义，select选择菜单，strong强调</p>
<p>块级元素：div无意义，分区  ，form表单，h1~h6标题，,dl,dt,dd自定义列表，hr水平分割线，li列表项，ol,ul列表，p段落</p>
<p>特殊元素具有行和块的属性：img、input、table</p>
<!--概念第二题-->
<hr>
<h2>概念第二题 :选择器，优先级，继承</h2>
<p>css选择器：标签选择器，id选择器，类选择器，后代选择器，子元素选择器，属性选择器</p>
<p>可以继承的css样式：所有元素可继承：visibility和cursor。
    内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
    块状元素可继承：text-indent和text-align。
    列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。</p>
<p>优先级计算：表选择器1，类选择器10，id选择器100，内联最高。优先级可叠加，但是不能跨界，如无论多少个标签选择器叠加在一起，也不如一个类选择器的优先级高；</p>
<p>important的优先级高于内联</p>
<p>盒子模型</p>
<img src="box.JPG" alt=""width="600px">
<hr>
<h1>概念第三题:清除浮动的方式</h1>
<p>1.给父级添加高度；优点：代码少，简单。缺点：只适合固定高度布局</p>
<p>2.结尾添加空元素，让它clear:both;  优点：简单，代码少，浏览器支持好。  缺点：增加无用的div元素</p>
<p>3.为父容器定义伪类:after和zoom.方法如下：</p>
<p> .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}</p>
<p> .clearfloat{zoom:1}</p>
<p>优点：兼容性好；缺点：代码多，复杂</p>
<hr>
<h1>概念第四题：html5存储类型</h1>
<p>cookies,可以永久存在，也可以设置估计销毁时间</p>
<p>sessionStorage，关闭页面就销毁</p>
<p>localStorage,除非手动销毁，否则一直存在</p>
<hr>
<h1>概念第五题：http状态码</h1>
<p>100 Continue
    初始的请求已经接受，客户应当继续发送请求的其余部分</p>
<p>200 OK
    一切正常，对GET和POST请求的应答文档跟在后面</p>
<p>300 Multiple Choices
    客户请求的文档可以在多个位置找到，这些位置已经在返回的文档内列出。如果服务器要提出优先选择，则应该在Location应答头指明。</p>
<p>404 Not Found
    无法找到指定位置的资源</p>
<p>500 Internal Server Error
    服务器遇到了意料不到的情况，不能完成客户的请求</p>
<p>502 Bad Gateway
    服务器作为网关或者代理时，为了完成请求访问下一个服务器，但该服务器返回了非法的应答
</p>
</body>
</html>